<template>
	<div class="per-detail">
		<!--sub_renyuanguanli/person_detail/person_detail.wxml-->
		<div class="top_bg_box">
			<div class="top_bg_content">
				<div class="top_bg_content_left">
					<img src="~img/marketingExtension/2level_icon.png" mode="widthFix" />
					<p>{{ userInfo.name }}</p>
				</div>
				<div class="top_bg_content_right">
					<van-icon name="underway-o" />
					<p>{{ '2022-07-22 09:12' }}</p>
				</div>
			</div>
		</div>
		<div class="info_box">
			<div class="personal-info-item">
				<div>用户姓名</div>
				<div>{{ '' }}</div>
			</div>
			<div class="personal-info-item">
				<div>手机号码</div>
				<div>{{ '' }}</div>
			</div>

			<div class="personal-info-item">
				<div>所在银行</div>
				<div>{{ '' }}</div>
			</div>
			<div class="personal-info-item">
				<div style="width: 260px">所在分支行</div>
				<div>{{ '' }}</div>
			</div>
			<div class="personal-info-item">
				<div>用户角色</div>
				<!-- <div>
            {{
              userInfo.roles[0].roleName == "fir_admin"
                ? "一级管理员"
                : userInfo.roles[0].roleName == "sec_admin"
                ? "二级管理员"
                : userInfo.roles[0].roleName == "manager"
                ? "客户经理"
                : userInfo.roles[0].roleName == "cbrc"
                ? "银监用户"
                : "无"
            }}
          </div> -->
			</div>
			<div class="personal-info-item3">
				<div>用户标签</div>
				<!-- <div class="titleList">
            <div v-for="(item, index) in isParticipate" :key="index">
              <div class="title" v-if="item == '01'">普惠业务</div>
              <div class="title" v-elif="item == '02'">大中型企业</div>
              <div class="title" v-elif="item == '03'">国际业务</div>
              <div class="title" v-elif="item == '04'">知识产权质押业务</div>
              <div class="title" v-elif="item == '05'">其他</div>
            </div>
          </div> -->
			</div>
			<div class="personal-info-item">
				<div>银行系统工号</div>
				<div>{{ '' }}</div>
			</div>
			<div class="personal-info-item">
				<div>是否参与银企对接走访</div>
				<div>{{ '' }}</div>
			</div>
			<div class="personal-info-item">
				<div>走访类型</div>
				<div>
					{{ '' }}
				</div>
			</div>
			<div class="personal-info-item personal-info-item2">
				<div>名片/工牌照片</div>
				<div>
					<!-- <img :src="userInfo.jobCardUrl" /> -->
				</div>
			</div>

			<div class="btn_box">
				<van-button type="info" block custom-class="btn1" @click="toEditClick">修改信息</van-button>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'perDetail',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {},
		/* 2. Vue数据 */
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {
				userInfo: {},
			};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {},
		mounted() {},
		destroy() {},
		/* 5. Vue方法 */
		methods: {
			toEditClick() {
				this.$router.push({
					name: 'perEdit',
					query: {
						userId: '8eba5ae9428b4689b1304927a5c33b22',
					},
				});
			},
		}, // all the methods should be put here in the last
	};
</script>
<style scoped lang="scss">
	.per-detail {
		/* sub_renyuanguanli/person_detail/person_detail.wxss */
		position: relative;
		.top_bg_box {
			width: 100%;
			height: 89px;
			// background-image: url("https://zx-1311146360.cos.ap-shanghai.myqcloud.com/renyuanguanli/detail_header.png");
			background-image: url('~img/marketingExtension/people_top.png');
			background-size: 100% 100%;
			padding-top: 10px;
      background-repeat: no-repeat;
		}

		.top_bg_content {
			width: 353px;
			height: 50px;
			background: #ffffff;
			opacity: 0.46;
			border-radius: 12px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 13px;
			// border: 1px solid red;
		}

		.top_bg_content > div {
			display: flex;
			align-items: center;
			font-size: 14px;
		}

		.top_bg_content_left {
			color: #2c2c2c;
		}

		.top_bg_content_left img {
			width: 13px;
			height: 13px;
			margin-right: 5px;
		}

		.top_bg_content_right p {
			margin-left: 5px;
		}

		.info_box {
			width: 100%;
			height: 250px;
			background: #ffffff;
			border-radius: 19px;
			position: relative;
			top: -20px;
		}

		.personal-info-item1 {
			padding-left: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 64px;
			margin: 0 20px;
			font-size: 15px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #2c2c2c;
		}

		.personal-info-item {
			padding-left: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 64px;
			margin: 0 20px;
			font-size: 15px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #2c2c2c;
			border-bottom: 1px solid #e0e1e5;
		}
		.personal-info-item3 {
			padding-left: 10px;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			min-height: 64px;
			margin: 0 20px;
			font-size: 15px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #888888;
			border-bottom: 1px solid #e0e1e5;
			padding-top: 25px;
		}
		.personal-info-item2 {
			align-items: initial !important;
			height: 100px !important;
			padding: 18px 0;
			padding-left: 10px;
		}

		.personal-info-item div:nth-child(1) {
			color: #888888;
		}

		.personal-info-item div:nth-child(2) {
			font-size: 16px;
		}

		.personal-info-item2 img {
			width: 85px !important;
			height: 63px !important;
			border-radius: 0% !important;
		}

		.btn_box {
			padding: 35px;
		}

		.btn1 {
			border-radius: 8px !important;
		}
		.titleList {
			text-align: end;
		}
		.title {
			color: #2c2c2c !important;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 32px;
			padding-bottom: 10px;
		}
	}
</style>
